
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>luminance mask and alpha mask</title>
    <link rel="author" title="yanghengfeng"
          href="mailto:yanghengfeng@163.com">
    <link rel="help"
          href="http://www.w3.org/TR/css-masking/#MaskElement">
    <meta name="assert"
          content="">
    <link rel="match" href="">
<style type="text/css">
.mask{width:200px;height:200px;margin: 10px; background-color: blue;}
#masked{
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' width='200' height='200'><radialGradient id='grad'><stop offset='0%' stop-color='#000'  /><stop offset='100%' stop-color='yellow' stop-opacity='0'/></radialGradient><rect width='200' height='200' fill='url(#grad)'/></svg>");
}
#maskasBackground{
	background:url("data:image/svg+xml;utf8,<svg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' width='200' height='200'><radialGradient id='grad'><stop offset='0%' stop-color='#000'  /><stop offset='100%' stop-color='yellow' stop-opacity='0'/></radialGradient><rect width='200' height='200' fill='url(#grad)'/></svg>");
}
#luminancemask{
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns:xlink='http://www.w3.org/1999/xlink' xmlns='http://www.w3.org/2000/svg' width='200' height='200'><radialGradient id='grad'><stop offset='0%' stop-color='#000'  /><stop offset='100%' stop-color='yellow' stop-opacity='0'/></radialGradient><rect width='200' height='200' fill='url(#grad)'/></svg>");
	mask-source-type:luminance;
}
</style>
</head>
<body>
blue background color div
<div id="withoutmask" class="mask"></div>
svg as background
<div id="maskasBackground" class="mask"></div>
alpha masked(default) svg div
<div id="masked" class="mask"></div>
luminance  masked svg div
<div id="luminancemask" class="mask"></div>
</body>
</html>